import { Button } from 'antd';
import React, { useEffect, useState } from 'react'
import { CSVLink } from 'react-csv';

export default function ExportCSV(props) {
    const { data, header, fileName } = props
    const [headers, setHeader] = useState([])

    useEffect(() => {
        const createHeader = () => {
            let head = []
            for (const key in header) {
                if (Object.hasOwnProperty.call(header, key)) {
                    if (key === 'createdAt' || key === 'updatedAt') continue
                    const element = header[key];
                    if (key === 'id') {
                        head.push({ label: "序号", key })
                    } else {
                        head.push({ label: element, key })
                    }
                }
            }
            setHeader(head)
        }
        if (headers.length === 0) {
            createHeader()
            // console.log(data);
        }
    }, [header, headers])


    return (
        <Button type='primary' style={{ marginBottom: "5px" }}>
            <CSVLink
                type="primary"
                data={data}
                filename={fileName}
                headers={headers}
            >导出CSV</CSVLink >
        </Button>
    )
}